<template>
  <PCard class="bpp-con" :isCardBorder="false" :shadow="'never'" :isHeadBottomBorder="true"
    :bodyStyle="{ width: '100%' }">
    <div slot="header" class="bpp-title">
      <span>业务办理进度</span>
    </div>
    <div class="bpp-list">
      <div v-if="showCardList_.spjl" class="bpp-item">
        <auditProcess :extendObj="extendObj" :bizId="auditProcessConfig.flowNo" :flowCode="auditProcessConfig.flowCode">
        </auditProcess>
      </div>
      <div v-if="showCardList_.upload" class="bpp-item">
        <!-- 老版 -->
        <!-- <UpLoadFile ref="bpp_uf" :config="upLoadFileconfig"></UpLoadFile> -->
        <!-- 新版 -->
        <p-UpLoadFile ref="bpp_uf" v-model="bpp_ufMoled" :config="upLoadFileconfig" :showHelp="false" :customRequestEvent="PUpLoadFileCustomRequestEvent"></p-UpLoadFile>
      </div>
      <div v-if="showCardList_.payForm" class="bpp-item">
        <div style="padding: 20px 10px;">订单待支付：{{ orderAmount }} 元</div>
      </div>
      <div v-if="btnLabel != ''" class="bpp-item">
        <div style="width: 400px; margin: 10px;">
          <a-button type="primary" v-if="showBtn" block @click="btnEvent">{{ btnLabel }}</a-button>
        </div>
      </div>
    </div>
  </PCard>
</template>

<script>
import auditProcess from '@/views/common/auditProcess.vue'
import pageEvent from '../util/pageEventsp'

const uploadConfig = ()=>{
  return {
    // 此参数必填  上传路径
    dir: "/qsb/idCard/",
    // 身份证  all   ；  单文件 对应 card1 ；   多文件 对应  card3 ； 身份证  对应  card1（身份证正面）、card2（身份证反面）
    model: "多文件",
    // 此参数选填   此属性只在 model= 身份证 时 启用   默认值文false
    showBG: false,
    // 此参数选填  表示是否可编辑
    readonly: false,
    // 提示信息
    tips:{
      card3: '请选择要上传的文件',
    },
    // 此参数选填   文件上传必填校验 默认为false 不校验   当值为true时进行强制校验  需要配合【getDataCheckRes】方法使用；
    // 方法【getDataCheckRes】的具体用法如: this.$refs.UpLoadFile.getDataCheckRes({ card1: "请上传身份证正面",card2: "请上传身份证反面", card3: "请上传附件"});
    // 其中 【getDataCheckRes】的参数辨识检验不通过时对应的提示信息；card1、card2、card3均可缺省，也可选填对应的字段    此参数可空
    required: true,
    // 此参数选填   要回显的数据 card1 card2 的值的格式为：{name:'',url:''} ;  card3 的值的格式为 [{name:'',url:''}，{name:'',url:''}]
    defaultFileList: {
      card3: [],
    },
    // 此参数集必填
    fielConfig: {
      // 允许上传的文件类型 当为空时表示不限制  默认为空
      //    可供选择类型：
      //          图片('jpg', 'png', 'jpeg')
      //          文档('xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt')
      //          压缩包('zip', 'rar')  发票('pdf', 'jpg', 'png', 'jpeg', 'doc', 'docx', 'zip', 'rar')
      //          PDF(pdf)
      //          委托代征协议('pdf','jpg', 'png', 'jpeg')
      //          我的任务('jpg', 'png', 'jpeg','pdf','xlsx', 'xls', 'pdf', 'doc', 'docx','zip', 'rar' )
      // eg:
      //    当值为string类型时，对所有（card1,card2,card3）的有效；
      //    当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
      type: "",
      // 允许上传的文件个数  默认值为1
      // eg: 1 表示只允许上传1个文件；
      //      当值为对象（{"card1":1,"card2":2, "card3":3}）时，可指定每个（card1/card2/card3）所对应的类型
      size: 10,
      // 上传的单个文件大小 单位为 MB  默认值为1
      //  eg: 当值为 number 时，对所有（card1,card2,card3）的有效；
      //        当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
      singleFileSize: 60,
    },
  }
}

export default {
  name: 'BusinessProcessingProgress',
  components: { auditProcess },
  props: {
    // 用于控制 审批记录  上传组件  支付组件 的显示隐藏
    showCardList: { type: Object },
    // 用户传递数据
    dataInfo: { type: Object },
    // 数据库查询到数据   此信息中必须包含 订单信息
    dbData: { type: Object },
  },
  data() {
    return {
      extendObj: { bankName: '' },
      auditProcessConfig: {
        flowNo: '',
        flowCode: '',
      },
      orderAmount: '--',
      btnLabel: '',
      showBtn: false,
      showCardList_: {
        spjl: true,
        upload: false,
        payForm: false
      },
      bpp_ufMoled:[],
      // 新版
      upLoadFileconfig:uploadConfig(),
      // 老版
      upLoadFileconfig1: {
        readonly: false,  // 用于标记是否是可编辑的 此参数可选   默认值 false 表示可编辑   true 表示只读，不可编辑
        dir: '/qsb/idCard/', // 上传文件的地址
        required: true, // 文件上传必填校验 默认为false 不校验   当值为true时进行强制校验
        showCardList: ['card3'],
        upLoadCardListConfig: [
          // { type: '1', tips: '身份证人像面', fileInfo: { name: '', url: '' } },
          // { type: '1', tips: '身份证国徽面', fileInfo: { name: '', url: '' } }
        ], // 此项最多可以传两组值 {type:'1',tips:'身份证人像面',backgroundPic:''},
        fielConfig: {
          type: '', // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票
          size: 10, // 允许上传的文件个数  默认值为1
          singleFileSize: 60, //上传的单个文件大小 单位为 MB  默认值为1
        }
      }
    }
  },
  watch: {
    showCardList: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          // const {uploadData,...args} = val
          this.showCardList_ = Object.assign({}, JSON.parse(JSON.stringify(this.showCardList_)), val)
          // 老版
          // this.upLoadFileconfig.upLoadCardListConfig = val.uploadData || []
          // 新版
          this.upLoadFileconfig.defaultFileList.card3 = val.uploadData || []
          this.upLoadFileconfig.readonly = !val.uploadReadonly
          // console.log('showCardList===>',this.showCardList_,val);
        }
      },
      deep: true,
      immediate: true
    },
    dataInfo: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          // val.electronicSignature.orderNo  电子签章的业务
          if (val.data) {
            this.auditProcessConfig.flowNo = val.data.flowNo || ''
            this.auditProcessConfig.flowCode = val.data.flowCode || ''
          }
        }
      },
      deep: true,
      immediate: true
    },
    dbData: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          // val.electronicSignature.orderNo  电子签章的业务
          // val.taxDeclarationEntVo   个税申报业务
          const orderNo = val && val.orderNo || val && val.electronicSignature && val.electronicSignature.orderNo || val && val.taxDeclarationEntVo && val.taxDeclarationEntVo.orderNo || ''
          this.extendObj.bankName = val.bankName
          this.getOrderInfo(orderNo)
        }
      },
      deep: true,
      immediate: true
    },
    showCardList_: {
      handler(val) {
        const { uploadReadonly, upload, payForm } = val

        // 上传组件为只读 不可用
        if (uploadReadonly === true && upload === true) {
          // 需要支付
          if (payForm === true) {
            this.btnLabel = '立即支付'
            this.showBtn = true
          }
          // 不需要支付
          if (payForm === false) {
            this.btnLabel = '提交资料'
            this.showBtn = true
          }
        }
        // 有文件只显示上传组件不需要上传
        if (uploadReadonly === false && upload === true) {
          // 不需要支付
          if (payForm === false) {
            this.btnLabel = ''
            this.showBtn = false
          }
          // 需要支付
          if (payForm === true) {
            this.btnLabel = '立即支付'
            this.showBtn = true
          }
        }
        // 没有需要上传的附件，状态是30 需要支付
        if (uploadReadonly === false && upload === false) {
          // 需要支付
          if (payForm === true) {
            this.btnLabel = '立即支付'
            this.showBtn = true
          }
          // 不需要支付
          if (payForm === false) {
            this.btnLabel = ''
            this.showBtn = false
          }
        }

        // if (val.upload === true && val.payForm === true && val.uploadReadonly == false) {
        //   this.btnLabel = '提交资料并支付'
        //   this.showBtn = true
        // }
        // if (val.upload === true && val.payForm === false && val.uploadReadonly == false) {
        //   this.btnLabel = '提交资料'
        //   this.showBtn = true
        // }
        // if (val.upload === true && val.payForm === true && val.uploadReadonly == true) {
        //   this.btnLabel = '立即支付'
        //   this.showBtn = true
        // }
        // if (val.upload === false && val.payForm === false) {
        //   this.btnLabel = ''
        //   this.showBtn = false
        // }
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    this.pageInit()
  },

  methods: {
    pageEvent(type, ...args) {
      return pageEvent(type, this, ...args)
    },
    btnEvent() {
      const btnLabelList = {
        "提交资料并支付": "1",
        "提交资料": "2",
        "立即支付": "3",
        "": "0",
      }

      const typeName = this.dataInfo.name
      this.pageEvent('BusinessProcessingProgressInfo', typeName, btnLabelList[this.btnLabel], this.dataInfo, this.dbData)
    },
    /**
     * 获取订单金额
     */
    getOrderInfo(orderNo) {
      // 缺少查询订单金额的接口
      if (orderNo != '') {
        this.pageEvent('getBePaidAmount', orderNo)
      }
    },
    pageInit() {
    }
  }
}
</script>

<style lang="less">
.bpp-con {
  .bpp-title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  .bpp-list {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;

    .bpp-item {
      width: 100%;
    }
  }
}
</style>
